<template>
  <el-form
    ref="refFormRefs"
    :class="['ls-form', { 'is-inline': inline, 'ls-show-all': showAll }]"
    inline
    :label-width="labelWidth"
    :model="model"
    v-bind="$attrs"
  >
    <el-row class="ls-search-from" ref="rfmediaRow">
      <!-- $attrs  props 没有接收的属性 -->
      <template v-for="(item, index) in config" :key="index">
        <el-col
          v-if="!item.hidden"
          class="ls-search-col-custom"
          :class="{ 'ls-show-col': !showAll }"
          :xs="defaultMediaVal.xs"
          :sm="defaultMediaVal.sm"
          :md="defaultMediaVal.md"
          :lg="defaultMediaVal.lg"
          :xl="defaultMediaVal.xl"
        >
          <!-- 插槽 -->
          <slot v-if="item.type === 'itemSlot'" :name="item.slotName" v-bind="item"></slot>
          <!-- 二级头部 -->
          <div v-else-if="item.type === 'header'" :key="index" class="segment-title">
            {{ item.label }}
          </div>
          <!-- 隐藏 -->
          <span
            v-else-if="item.hide || item.hidden"
            :key="index + 1"
            :style="{
              'grid-column-start': 'span 24',
              'grid-column': 'span ' + (item.span || 24),
              'grid-row': 'span ' + (item.row || 1),
              display: item.hidden ? 'none' : ''
            }"
          ></span>
          <!-- 普通的 -->
          <layout
            v-else
            :key="index + 2"
            class="ls-form-item"
            :style="{
              'grid-column-start': 'span 24',
              'grid-column': 'span ' + (item.span || 24),
              'grid-row': 'span ' + (item.row || 1)
            }"
            :item="item"
            :model="model"
            :global="$attrs"
            @mapAnewValidate="anewValidate"
          >
            <!-- 地图走校验anewValidate -->
            <slot :name="item.slotName" v-bind="{ value: model[item.prop], row: item }"></slot>
          </layout>
        </el-col>
      </template>

      <el-col v-bind="searchBtnSg" class="ls-form-search-btn">
        <slot name="searchBtn"></slot>
        <el-button @click="showMore" v-if="showExpand" link style="padding: 8px 0" type="primary">
          {{ showAll ? '收起' : '展开' }}
          <el-icon v-show="showAll" class="ls-form-search-btn-icon"><ArrowUp /></el-icon>
          <el-icon v-show="!showAll" class="ls-form-search-btn-icon"> <ArrowDown /></el-icon>
        </el-button>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup>
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import layout from 'ls-form/src/layout.vue'
import { ref, computed, onMounted } from 'vue'
import { useResizeObserver } from '@vueuse/core'
let emit = defineEmits(['update:config', 'update:model', 'collapse'])
const props = defineProps({
  model: Object,
  config: Array,
  inline: Boolean,
  labelWidth: {
    type: String,
    default: 'auto'
  }
})
// 新增的搜索样式及方法
const showAll = ref(false)
// 默认栅格配置
const defaultMediaVal = {
  xs: 24,
  sm: 12,
  md: 8,
  lg: 6,
  xl: 4
}
// 自动计算操作按钮栏的媒体查询值
const searchBtnSg = computed(() => {
  const domVal = props.config?.filter((item) => item.hidden !== true).length || 0 // 查询的参数总量
  const { xs, sm, md, lg, xl } = defaultMediaVal
  let btnSm = {
    xs: xs,
    sm: sm,
    md: domVal < 24 / md ? 24 - domVal * md : md,
    lg: domVal < 24 / lg ? 24 - domVal * lg : lg,
    xl: domVal < 24 / xl ? 24 - domVal * xl : xl
  }
  if (showAll.value) {
    btnSm = {
      xs: 24,
      sm: domVal % (24 / sm) ? sm : 24,
      md: domVal % (24 / md) ? 24 - (domVal % (24 / md)) * 8 : 24,
      lg: domVal % (24 / lg) ? 24 - (domVal % (24 / lg)) * 6 : 24,
      xl: domVal % (24 / xl) ? 24 - (domVal % (24 / xl)) * 4 : 24
    }
  }
  return btnSm
})
const showMore = () => {
  showAll.value = !showAll.value
  emit('collapse', showAll.value)
}
// 根据自定义class获取当前是否有隐藏元素
const showExpand = ref(true)
const getDisplayNone = () => {
  const width = window.innerWidth
  let domListLength = document.querySelectorAll('.ls-search-col-custom').length
  // 若dom+1 数量大于每行的数量则展示
  /*
  xs	<768px
  sm	≥768px
  md	≥992px
  lg	≥1200px
  xl	≥1920px
  */

  if (width < 768) {
    // 默认可展示2个
    domListLength > 2 ? (showExpand.value = true) : (showExpand.value = false)
    return
  }

  if (width <= 992) {
    domListLength > 1 ? (showExpand.value = true) : (showExpand.value = false)
    return
  }
  if (width < 1200) {
    domListLength > 2 ? (showExpand.value = true) : (showExpand.value = false)
    return
  }
  if (width < 1920) {
    domListLength > 3 ? (showExpand.value = true) : (showExpand.value = false)
    return
  }
  if (width >= 1920) {
    domListLength > 5 ? (showExpand.value = true) : (showExpand.value = false)
    return
  }
}
const rfmediaRow = ref(null)
onMounted(() => {
  useResizeObserver(rfmediaRow, (entries) => {
    const entry = entries[0]
    const { width } = entry.contentRect
    getDisplayNone(width)
  })
})

//结束
const refFormRefs = ref(null)
const anewValidate = (prop) => {
  refFormRefs.value.validateField(prop)
}
const validate = (callback) => {
  refFormRefs.value.validate(callback)
}
const resetFields = () => {
  refFormRefs.value.resetFields()
}
const clearValidate = (props) => {
  refFormRefs.value.clearValidate(props)
}
const setFormConfig = (config, data, prop, attr = 'options') => {
  config.find((item) => item.prop === prop)[attr] = data
  emit('update:config', config)
}
const setFormModel = (formData, data, prop) => {
  formData[prop] = data
  emit('update:model', formData)
}
defineExpose({
  anewValidate,
  validate,
  resetFields,
  clearValidate,
  setFormConfig,
  setFormModel
})
</script>

<style lang="scss" scoped>
.el-col {
  padding-right: 15px;
  min-height: 52px;
}
.el-col:last-child {
  padding-right: 0 !important;
}
.ls-show-all {
  .el-col {
    display: block;
  }
}
.ls-form-search-btn-icon {
  margin-left: 10px;
}
.ls-form-search-btn {
  display: flex !important;
  align-items: flex-start;
  justify-content: end;
  :deep(.el-button + .el-button) {
    margin-left: 20px;
  }
}
.ls-search-from {
  :deep(.el-select) {
    width: 100% !important;
  }
  :deep(.el-select-v2) {
    width: 100% !important;
  }
  :deep(.el-form-item) {
    margin-right: 0 !important;
    width: 100% !important;
  }
  :deep(.el-date-editor.el-input) {
    width: 100% !important;
  }

  :deep(.el-input) {
    width: 100% !important;
  }
}
/*
xs	<768px
sm	≥768px
md	≥992px
lg	≥1200px
xl	≥1920px
*/
/* 小于768  每行展示一个 */
@media only screen and (max-width: 768px) {
  .ls-search-from {
    .ls-show-col:nth-child(n + 3) {
      display: none;
    }
  }
}
/*sm	≥768px 每行两个 */
@media only screen and (min-width: 768px) {
  .ls-search-from {
    .ls-show-col:nth-child(n + 2) {
      display: none;
    }
  }
}
/**= >=992 每行三个 */
@media only screen and (min-width: 992px) {
  .ls-search-from {
    .ls-show-col:nth-child(n + 3) {
      display: none;
    }
    .ls-show-col:nth-child(-n + 2) {
      display: block;
    }
  }
}
/**= >=1200px 每行四个个 */
@media only screen and (min-width: 1200px) {
  .ls-search-from {
    .ls-show-col:nth-child(n + 4) {
      display: none;
    }
    .ls-show-col:nth-child(-n + 3) {
      display: block;
    }
  }
}
/**= >=1920px 每行五个 */
@media only screen and (min-width: 1920px) {
  body {
    background: rgb(7, 132, 2);
  }
  .ls-search-from {
    .ls-show-col:nth-child(n + 6) {
      display: none;
    }
    .ls-show-col:nth-child(-n + 5) {
      display: block;
    }
  }
}

:deep(.el-form-item__label-wrap) {
  margin-left: 0 !important;
}
</style>
